<template>
  <div class="login-container">
    <div class="loginmain">
      <div class="login_bg">
        <el-row>
          <el-col :span="12">
            <div style="text-align: center">
              <img :src="logo" class="logo_img">
            </div>
            <div class="d_img">
              <img src="../../assets/img_2.5d.png">
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              <el-card class="login" shadow="never">
                <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">

                  <h2 class="login-title color-main">My-Vue-Project项目</h2>

                  <el-form-item class="ipt_bor" prop="username">
                    <span class="svg-container">
                      <svg-icon icon-class="user" />
                    </span>
                    <el-input v-model="loginForm.username" name="username" type="text" auto-complete="on" placeholder="请输入登录账号" />
                  </el-form-item>

                  <el-form-item class="ipt_bor" prop="password">
                    <span class="svg-container">
                      <svg-icon icon-class="password" />
                    </span>
                    <el-input
                      :type="pwdType"
                      v-model="loginForm.password"
                      name="password"
                      auto-complete="on"
                      placeholder="请输入登录密码"
                      @keyup.enter.native="handleLogin" />
                    <span class="show-pwd" @click="showPwd">
                      <svg-icon :icon-class="pwdType === 'password' ? 'eye' : 'eye-open'" />
                    </span>
                  </el-form-item>
                  <el-form-item>
                    <el-button :loading="loading" class="btn" type="primary" style="width:60%;" @click.native.prevent="handleLogin">
                      登 录
                    </el-button>
                  </el-form-item>
                </el-form>
              </el-card>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <img :src="bg" class="bg">
  </div>
</template>

<script>
import logo from '../../assets/logo-white.png'
import bg from '../../assets/bg.jpg'
import { removeToken } from '@/utils/auth'
import router from '@/router'
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        // username: [{ required: true, trigger: 'blur', message: '请输入登录账号' }],
        // password: [{ required: true, trigger: 'blur', message: '请输入登录密码' }]
      },
      loading: false,
      pwdType: 'password',
      redirect: undefined,
      logo, // logo
      bg // 背景
    }
  },
  methods: {
    showPwd() {
      if (this.pwdType === 'password') {
        this.pwdType = ''
      } else {
        this.pwdType = 'password'
      }
    },
    handleLogin() {
      if (!this.inputValid()) return false
      this.loading = true
      if (this.loginForm.username === 'sjj' && this.loginForm.password === '123456') {
        this.$store.dispatch('Login', this.loginForm).then(() => {
          this.loading = false
          this.$store.dispatch('GetInfo').then(res => { // 拉取user_info
            if (this.$store.getters.roles.length > 0) {
              const allowedPages = this.$store.getters.allowedPages
              this.$store.dispatch('GenerateRoutes', { allowedPages }).then(() => { // 根据roles权限生成可访问的路由表
                router.addRoutes(this.$store.getters.addRouters) // 动态添加可访问路由表
              })
              this.$router.push({ path: this.redirect || '/' })
            } else {
              this.$message.error('该成员无对应角色权限，请联系管理员添加角色权限')
              this.$store.commit('SET_TOKEN', '')
              this.$store.commit('SET_ROLES', [])
              removeToken()
            }
          }).catch((err) => {
            console.log(err)
          })
        }).catch(() => {
          this.loading = false
        })
      } else {
        this.loading = false
        this.$message.error('用户名或是密码错误')
      }
    },
    // 校验输入框是否输入完成
    inputValid() {
      if (this.loginForm.username === '' || this.loginForm.username === undefined || this.loginForm.username === null) {
        this.$message.error('请输入登录账号')
        return false
      }
      if (this.loginForm.password === '' || this.loginForm.password === undefined || this.loginForm.password === null) {
        this.$message.error('请输入登录密码')
        return false
      }
      return true
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
$bg:#fff;
$light_gray:#666;

.login-container {
  .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;
    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      height: 47px;
      &:-webkit-autofill {
        -webkit-text-fill-color: #606266 !important;
      }
    }
  }
  .ipt_bor {
    border: 1px solid rgb(47, 149, 249);
    // border-bottom: 1px solid #000;
    border-radius: 5px;
    color: #454545;
    margin-bottom: 30px;
  }
}

</style>

<style rel="stylesheet/scss" lang="scss" scoped>
$bg:#2d3a4b;
$dark_gray:#2895fc;
$light_gray:#eee;
.login-container {
  position: fixed;
  height: 100%;
  width: 100%;
  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }
  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}

.loginmain {
  width: 720px;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
}
.login_bg {
  background-color: #fff;
  border-radius: 20px;
  text-align: center;
}
.login {
  border: none;
}
.login-title {
  text-align: center;
}
.color-main {
  color: #000;
  margin-bottom: 30px;
}
.color-main1 {
  color: #cccccc;
  margin-bottom: 20px;
}
.logo_img {
  height: 30px;
  width: 30px;
  float: left;
  margin-top: 20px;
  margin-left: 20px;
}
.d_img {
  width: 100vw;
  height: 400px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.bg {
  background: rgb(26, 188, 156);
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.svg-container {
  padding: 6px 5px 6px 15px;
  vertical-align: middle;
  width: 30px;
  display: inline-block;
}
.svg-container_login {
  font-size: 20px;
}
.el-input__inner {
  padding-left: 40px!important;
}
.btn {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: none;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0;
  margin-top: 20px;
  -webkit-transition: .1s;
  transition: .1s;
  font-weight: 500;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 20px;
  width: 100%;
  color: #fff;
  background-color: rgb(47, 149, 249);
}
.btn:hover {
  background-color: rgba(47, 149, 249, 0.9);
}
.el-input__inner:focus {
  border-color: rgb(47, 149, 249);
  outline: 0;
}
.oth {
  text-align: center;
  color: #999;
  font-size: 12px;
  position: fixed;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}
.el-card {
  background: none;
  margin-top: 10px;
}
</style>
